<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { regionData, CodeToText } from 'element-china-area-data'
import { useRegisterStore } from '@/stores/register'
import { useRouter } from 'vue-router'

const registerStore = useRegisterStore()
const formRef = ref()
const options = regionData

const validatePasswordStartWith = function (rule, value) {
    return (
        !!model.value.loginKey &&
        model.value.loginKey.startsWith(value) &&
        model.value.loginKey.length >= value.length
    )
}

const validatePasswordSame = function (rule, value) {
    return value === model.value.loginKey
}

const rules = reactive({
    name: {
        required: true,
        trigger: ['blur'],
        validator: (rule, value) => {
            return new Promise(async (resolve, reject) => {
                const res = await registerStore.checkStatus(value)
                if (res?.data[0]?.name) {
                    reject(Error('店铺名称已存在'))
                } else if (!value) {
                    reject(Error('请输入店铺名称'))
                } else {
                    resolve(true)
                }
            })
        }
    },
    loginName: {
        required: true,
        trigger: ['blur'],
        validator: (rule, value) => {
            return new Promise(async (resolve, reject) => {
                const res = await registerStore.checkLoginName(value)
                if (res?.data[0]?.name) {
                    reject(Error('商户名已存在'))
                } else if (!value) {
                    reject(Error('请输入商户名'))
                } else {
                    resolve(true)
                }
            })
        }
    },
    loginKey: {
        required: true,
        trigger: ['blur'],
        message: '请输入商户密码'
    },
    loginKey1: [
        {
            required: true,
            message: '请再次输入密码',
            trigger: ['input', 'blur']
        },
        {
            validator: validatePasswordStartWith,
            message: '两次密码输入不一致',
            trigger: 'input'
        },
        {
            validator: validatePasswordSame,
            message: '两次密码输入不一致',
            trigger: ['blur', 'password-input']
        }
    ],
    introduction: {
        required: true,
        trigger: ['blur'],
        message: '请输入店铺介绍'
    },
    tel: {
        required: true,
        trigger: ['blur'],
        message: '请输入联系电话',
    },
    position: {
        required: true,
        trigger: ['blur'],
        message: '请输入详细地址'
    }
})

const selectedOptions = ref([])

const model = ref({
    name: '',
    loginName: '',
    loginKey: '',
    loginKey1: '',
    introduction: '',
    tel: '',
    position: '',
})

const submitRegister = () => {
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            console.log('验证通过')
            await registerStore.doRegister(model.value, selectedOptions.value)
            model.value = {
                name: '',
                loginName: '',
                loginKey: '',
                loginKey1: '',
                introduction: '',
                tel: '',
                position: '',
            }
            selectedOptions.value = ['', '', '']
            router.push({ path: '/login' })
        } else {
            console.log(errors)
        }
    })
}

const router = useRouter()
const gotoLogin = () => {
    router.push({ path: '/login' })
}

</script>

<template>
    <div class="register">
        <n-card title="商户注册">
            <n-form ref="formRef" :model="model" :rules="rules" label-placement="left" label-width="auto"
                require-mark-placement="left">

                <n-form-item label="店铺名称" path="name">
                    <n-input v-model:value="model.name" placeholder="请输入店铺名称" />
                </n-form-item>

                <n-form-item label="商户名" path="loginName">
                    <n-input v-model:value="model.loginName" placeholder="请输入商户名" />
                </n-form-item>

                <n-form-item label="商户密码" path="loginKey">
                    <n-input v-model:value="model.loginKey" type="password" placeholder="请输入商户密码" />
                </n-form-item>

                <n-form-item label="密码确认" path="loginKey1">
                    <n-input v-model:value="model.loginKey1" type="password" placeholder="请再次输入密码" />
                </n-form-item>

                <n-form-item label="店铺介绍" path="introduction">
                    <n-input v-model:value="model.introduction" placeholder="请输入店铺介绍" type="textarea"
                        :autosize="{ minRows: 3, maxRows: 5 }" />
                </n-form-item>

                <n-form-item label="联系电话" path="tel">
                    <n-input v-model:value="model.tel" placeholder="请输入联系电话" />
                </n-form-item>

                <n-form-item label="店铺地址" path="selectedOptions">
                    <el-cascader size='large' placeholder="请选择地址" :options='options' v-model='selectedOptions'>
                    </el-cascader>
                </n-form-item>

                <n-form-item label="详细地址" path="position">
                    <n-input v-model:value="model.position" placeholder="请输入详细地址" type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }" />
                </n-form-item>
                <div class="btn">
                    <n-button type="info" @click="submitRegister">提交申请</n-button>
                    <n-button @click="gotoLogin">返回</n-button>
                </div>
            </n-form>
        </n-card>
    </div>
</template>



<style scoped>
.n-card {
    max-width: 600px;
}

.register {
    margin: 50px auto;
    width: 600px;
}

.btn {
    text-align: center;
}

.btn .n-button {
    margin: 0 5px;
}
</style>